<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 教程 - 完整指南</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            text-align: center;
            padding: 30px 0;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 10px;
            margin-bottom: 30px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #4a90e2;
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .subtitle {
            color: #666;
            font-size: 1.2em;
        }

        .section {
            background: rgba(255, 255, 255, 0.9);
            margin-bottom: 30px;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        h2 {
            color: #4a90e2;
            border-bottom: 2px solid #4a90e2;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }

        h3 {
            color: #555;
            margin: 15px 0 10px 0;
        }

        p {
            margin-bottom: 15px;
            text-align: justify;
        }

        .example {
            background: #f8f9fa;
            border-left: 4px solid #4a90e2;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 5px 5px 0;
        }

        code {
            background: #e9ecef;
            padding: 2px 5px;
            border-radius: 3px;
            font-family: 'Courier New', monospace;
        }

        .btn {
            display: inline-block;
            padding: 10px 20px;
            background: #4a90e2;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            transition: background 0.3s;
            border: none;
            cursor: pointer;
            margin: 5px;
        }

        .btn:hover {
            background: #357ae8;
        }

        .canvas-container {
            text-align: center;
            margin: 20px 0;
        }

        canvas {
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }

        th {
            background-color: #4a90e2;
            color: white;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        footer {
            text-align: center;
            padding: 20px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 10px;
            margin-top: 30px;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }
            
            h1 {
                font-size: 2em;
            }
            
            .section {
                padding: 15px;
            }
        }

        /* SVG样式 */
        .svg-example {
            text-align: center;
            margin: 20px 0;
        }

        /* 表单样式 */
        form {
            margin: 20px 0;
        }

        input, textarea, select {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        /* 多媒体样式 */
        video, audio {
            width: 100%;
            max-width: 600px;
            margin: 10px 0;
        }

        /* 进度条样式 */
        progress {
            width: 100%;
            height: 20px;
            margin: 10px 0;
        }

        /* 拖放示例 */
        .draggable {
            width: 100px;
            height: 100px;
            background: #4a90e2;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 10px;
            border-radius: 5px;
            cursor: move;
        }

        .dropzone {
            width: 200px;
            height: 200px;
            border: 2px dashed #4a90e2;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 20px 0;
            border-radius: 5px;
        }

        .dropzone.dragover {
            background: rgba(74, 144, 226, 0.1);
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>HTML5 完整教程</h1>
            <img src="/src/assets/xuexi01/tupian.jpg" alt="HTML5 完整教程" height="200px" width="200px">
            <p class="subtitle">掌握HTML5的所有新特性和效果</p>
        </header>

        <section class="section">
            <h2>1. HTML5 简介</h2>
            <p>HTML5 是 HTML 标准的最新演进版本，它引入了许多新特性，旨在使网页开发更加简单和功能更强大。HTML5 包含了新的语义化标签、多媒体支持、图形绘制、本地存储等功能。</p>
            
            <div class="example">
                <h3>HTML5 声明</h3>
                <p>HTML5 使用简洁的文档类型声明：</p>
                <code>&lt;!DOCTYPE html&gt;</code>
            </div>
        </section>

        <section class="section">
            <h2>2. 新语义化标签</h2>
            <p>HTML5 引入了新的语义化标签，使网页结构更加清晰和易于理解。</p>
            
            <div class="example">
                <h3>常用语义化标签示例</h3>
                <p>以下是一个典型的 HTML5 页面结构：</p>
                <code>
                    &lt;header&gt; - 页面头部<br>
                    &lt;nav&gt; - 导航区域<br>
                    &lt;main&gt; - 主要内容<br>
                    &lt;article&gt; - 文章内容<br>
                    &lt;section&gt; - 章节<br>
                    &lt;aside&gt; - 侧边栏<br>
                    &lt;footer&gt; - 页面底部
                </code>
            </div>
            
            <header style="background: #e3f2fd; padding: 10px; margin: 10px 0;">
                <p>这是 &lt;header&gt; 标签示例</p>
            </header>
            
            <nav style="background: #f3e5f5; padding: 10px; margin: 10px 0;">
                <p>这是 &lt;nav&gt; 标签示例（导航区域）</p>
            </nav>
            
            <main style="background: #e8f5e8; padding: 10px; margin: 10px 0;">
                <p>这是 &lt;main&gt; 标签示例（主要内容）</p>
            </main>
            
            <footer style="background: #fff3e0; padding: 10px; margin: 10px 0;">
                <p>这是 &lt;footer&gt; 标签示例（页面底部）</p>
            </footer>
        </section>

        <section class="section">
            <h2>3. 表单增强</h2>
            <p>HTML5 为表单添加了新的输入类型和属性，提供了更好的用户体验和数据验证。</p>
            
            <form id="html5Form">
                <label for="email">邮箱 (email):</label>
                <input type="email" id="email" name="email" required>
                
                <label for="url">网址 (url):</label>
                <input type="url" id="url" name="url">
                
                <label for="number">数字 (number):</label>
                <input type="number" id="number" name="number" min="0" max="100">
                
                <label for="range">范围 (range):</label>
                <input type="range" id="range" name="range" min="0" max="100">
                
                <label for="date">日期 (date):</label>
                <input type="date" id="date" name="date">
                
                <label for="color">颜色 (color):</label>
                <input type="color" id="color" name="color">
                
                <label for="search">搜索 (search):</label>
                <input type="search" id="search" name="search">
                
                <button type="submit" class="btn">提交表单</button>
            </form>
        </section>

        <section class="section">
            <h2>4. 多媒体支持</h2>
            <p>HTML5 原生支持音频和视频，无需插件即可播放多媒体内容。</p>
            
            <h3>音频播放器</h3>
            <audio controls>
                <source src="/src/assets/xuexi01/huanghe.mp3" type="audio/mpeg">
                您的浏览器不支持音频元素。
            </audio>
            
            <h3>视频播放器</h3>
            <video controls width="600">
                <source src="/src/assets/xuexi01/baowei.mp4" type="video/mp4">
                您的浏览器不支持视频元素。
            </video>
        </section>

        <section class="section">
            <h2>5. Canvas 绘图</h2>
            <p>Canvas 提供了通过 JavaScript 绘制图形的功能。</p>
            
            <div class="canvas-container">
                <canvas id="myCanvas" width="400" height="200">
                    您的浏览器不支持 Canvas。
                </canvas>
                <br>
                <button class="btn" onclick="drawCanvas()">绘制图形</button>
            </div>
        </section>

        <section class="section">
            <h2>6. SVG 矢量图形</h2>
            <p>SVG 是一种基于 XML 的矢量图形格式，可以无限缩放而不失真。</p>
            
            <div class="svg-example">
                <svg width="200" height="200">
                    <circle cx="100" cy="100" r="80" fill="#4a90e2" />
                    <rect x="50" y="50" width="100" height="100" fill="#50c878" />
                    <text x="100" y="30" font-family="Arial" font-size="16" fill="#333" text-anchor="middle">
                        SVG 示例
                    </text>
                </svg>
            </div>
        </section>

        <section class="section">
            <h2>7. 本地存储</h2>
            <p>HTML5 提供了 localStorage 和 sessionStorage 两种本地存储方式。</p>
            
            <div class="example">
                <h3>本地存储示例</h3>
                <input type="text" id="storageInput" placeholder="输入要存储的内容">
                <button class="btn" onclick="saveToStorage()">保存到本地存储</button>
                <button class="btn" onclick="loadFromStorage()">从本地存储读取</button>
                <button class="btn" onclick="clearStorage()">清空存储</button>
                <p id="storageResult"></p>
            </div>
        </section>

        <section class="section">
            <h2>8. 地理定位</h2>
            <p>HTML5 的地理定位 API 可以获取用户的地理位置信息。</p>
            
            <button class="btn" onclick="getLocation()">获取我的位置</button>
            <p id="locationResult"></p>
        </section>

        <section class="section">
            <h2>9. 拖放功能</h2>
            <p>HTML5 支持原生的拖放功能，可以轻松实现元素拖拽。</p>
            
            <div class="draggable" draggable="true" id="draggableElement">
                拖拽我
            </div>
            
            <div class="dropzone" id="dropzone">
                拖到这里
            </div>
        </section>

        <section class="section">
            <h2>10. Web Workers</h2>
            <p>Web Workers 允许在后台线程中运行 JavaScript，避免阻塞用户界面。</p>
            
            <button class="btn" onclick="startWorker()">启动后台任务</button>
            <button class="btn" onclick="stopWorker()">停止后台任务</button>
            <p id="workerResult"></p>
        </section>

        <section class="section">
            <h2>11. 新的语义元素表格</h2>
            <table>
                <thead>
                    <tr>
                        <th>标签</th>
                        <th>描述</th>
                        <th>用途</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>&lt;header&gt;</td>
                        <td>定义文档或节的页眉</td>
                        <td>页面顶部或章节标题</td>
                    </tr>
                    <tr>
                        <td>&lt;nav&gt;</td>
                        <td>定义导航链接</td>
                        <td>网站导航菜单</td>
                    </tr>
                    <tr>
                        <td>&lt;main&gt;</td>
                        <td>定义主要内容</td>
                        <td>页面核心内容</td>
                    </tr>
                    <tr>
                        <td>&lt;article&gt;</td>
                        <td>定义文章</td>
                        <td>博客文章、新闻等</td>
                    </tr>
                    <tr>
                        <td>&lt;section&gt;</td>
                        <td>定义文档中的节</td>
                        <td>内容分组</td>
                    </tr>
                    <tr>
                        <td>&lt;aside&gt;</td>
                        <td>定义页面内容之外的内容</td>
                        <td>侧边栏、广告等</td>
                    </tr>
                    <tr>
                        <td>&lt;footer&gt;</td>
                        <td>定义文档或节的页脚</td>
                        <td>页面底部信息</td>
                    </tr>
                    <tr>
                        <td>&lt;figure&gt;</td>
                        <td>规定独立的流内容</td>
                        <td>图片、图表等</td>
                    </tr>
                    <tr>
                        <td>&lt;figcaption&gt;</td>
                        <td>定义 figure 元素的标题</td>
                        <td>图片说明</td>
                    </tr>
                </tbody>
            </table>
        </section>

        <footer>
            <p>© 2023 HTML5 教程 - 完整掌握 HTML5 的所有特性</p>
        </footer>
    </div>

    <script>
        // Canvas 绘图示例
        function drawCanvas() {
            const canvas = document.getElementById('myCanvas');
            const ctx = canvas.getContext('2d');
            
            // 清空画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 绘制矩形
            ctx.fillStyle = '#4a90e2';
            ctx.fillRect(10, 10, 100, 100);
            
            // 绘制圆形
            ctx.beginPath();
            ctx.arc(200, 60, 50, 0, 2 * Math.PI);
            ctx.fillStyle = '#50c878';
            ctx.fill();
            
            // 绘制线条
            ctx.beginPath();
            ctx.moveTo(300, 20);
            ctx.lineTo(380, 100);
            ctx.strokeStyle = '#ff6b6b';
            ctx.lineWidth = 5;
            ctx.stroke();
            
            // 绘制文字
            ctx.font = '16px Arial';
            ctx.fillStyle = '#333';
            ctx.fillText('Canvas 绘图示例', 120, 150);
        }
        
        // 本地存储示例
        function saveToStorage() {
            const input = document.getElementById('storageInput').value;
            localStorage.setItem('html5Tutorial', input);
            document.getElementById('storageResult').innerText = '数据已保存到本地存储';
        }
        
        function loadFromStorage() {
            const data = localStorage.getItem('html5Tutorial');
            document.getElementById('storageResult').innerText = '从本地存储读取的数据: ' + (data || '无数据');
        }
        
        function clearStorage() {
            localStorage.removeItem('html5Tutorial');
            document.getElementById('storageResult').innerText = '本地存储已清空';
        }
        
        // 地理定位示例
        function getLocation() {
            const resultElement = document.getElementById('locationResult');
            
            if (navigator.geolocation) {
                resultElement.innerText = '正在获取位置信息...';
                navigator.geolocation.getCurrentPosition(
                    function(position) {
                        resultElement.innerHTML = `
                            纬度: ${position.coords.latitude}<br>
                            经度: ${position.coords.longitude}<br>
                            精度: ${position.coords.accuracy} 米
                        `;
                    },
                    function(error) {
                        switch(error.code) {
                            case error.PERMISSION_DENIED:
                                resultElement.innerText = "用户拒绝了地理定位请求。";
                                break;
                            case error.POSITION_UNAVAILABLE:
                                resultElement.innerText = "位置信息不可用。";
                                break;
                            case error.TIMEOUT:
                                resultElement.innerText = "获取位置信息超时。";
                                break;
                            default:
                                resultElement.innerText = "获取位置信息时发生未知错误。";
                                break;
                        }
                    }
                );
            } else {
                resultElement.innerText = "您的浏览器不支持地理定位。";
            }
        }
        
        // 拖放功能示例
        const draggableElement = document.getElementById('draggableElement');
        const dropzone = document.getElementById('dropzone');
        
        draggableElement.addEventListener('dragstart', function(e) {
            e.dataTransfer.setData('text/plain', '拖拽元素');
        });
        
        dropzone.addEventListener('dragover', function(e) {
            e.preventDefault();
            dropzone.classList.add('dragover');
        });
        
        dropzone.addEventListener('dragleave', function() {
            dropzone.classList.remove('dragover');
        });
        
        dropzone.addEventListener('drop', function(e) {
            e.preventDefault();
            dropzone.classList.remove('dragover');
            dropzone.innerHTML = '<p>元素已成功拖放到此区域！</p>';
        });
        
        // Web Workers 示例
        let worker;
        
        function startWorker() {
            if (typeof(Worker) !== "undefined") {
                if (!worker) {
                    worker = new Worker(URL.createObjectURL(new Blob([`
                        let count = 0;
                        setInterval(function() {
                            postMessage(++count);
                        }, 1000);
                    `], {type: 'application/javascript'})));
                    
                    worker.onmessage = function(event) {
                        document.getElementById('workerResult').innerText = 
                            '后台任务运行中: ' + event.data + ' 秒';
                    };
                }
            } else {
                document.getElementById('workerResult').innerText = 
                    '您的浏览器不支持 Web Workers';
            }
        }
        
        function stopWorker() {
            if (worker) {
                worker.terminate();
                worker = undefined;
                document.getElementById('workerResult').innerText = '后台任务已停止';
            }
        }
        
        // 表单提交处理
        document.getElementById('html5Form').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('表单提交成功！检查控制台查看数据。');
            console.log('表单数据:', new FormData(this));
        });
        
        // 页面加载完成后绘制 Canvas
        window.onload = function() {
            drawCanvas();
        };
    </script>
</body>
</html>
